<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache">

    <meta http-equiv="Expires" content="0">
    <title>上传视频</title>
    <!-- 先引入vue.js -->
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="viewer.min.css">
    <link rel="stylesheet" href="postVideo.css">
    <script src="index.js"></script>
    <script src="v-viewer.min.js"></script>
    <script src="qs.js"></script>
    <!--axios-->
    <script src="./axios.min.js"></script>
    <title>上传视频</title>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <h2>视频上传</h2>
            </el-header>
            <!-- 视频上传内容 -->
            <el-main>
                <!-- 先给出一个上传的进度条 -->
                <!-- 在给出上传视频的类型以及内容 -->
                <!-- 标题 -->
                <div class="title">
                    <div class="title-text">标题:</div>
                    <div class="title-input">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                    </div>
                </div>
                <!-- 简介 -->
                <div class="detail">
                    <div class="detail-text">简介:</div>
                    <div class="detail-input">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
                            v-model="detail" maxlength=150>
                        </el-input>

                    </div>
                </div>
                <!-- 分类 -->
                <div class="classify">
                    <div class="classify-text">分类:</div>
                    <div class="classify-input">

                        <el-select v-model="classify" placeholder="请选择上传分类">
                            <el-option label="分类一" value="分类一"></el-option>
                            <el-option label="分类二" value="分类二"></el-option>
                            <el-option label="分类三" value="分类三"></el-option>
                            <el-option label="分类四" value="分类四"></el-option>
                        </el-select>

                    </div>
                </div>
                <!-- 文本 -->
            </el-main>
        </el-container>
        <el-container>
            <!-- <el-form enctype="multipart/form-data"> -->
            <el-upload class="upload-demo" drag action="http://192.168.0.107:8002/upload/videos" multiple
                :on-success="(value)=> handleSuccessImg(index, value)">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
            <!-- </el-form-item> -->
        </el-container>
        <el-container>
            <el-button class="submit" @click="submit" type="primary">提交</el-button>
        </el-container>
        <!-- 提交提示 -->
        <el-dialog width="30%" title="提示" :visible.sync="tips" append-to-body>
            <div style="text-align: center"> <p>提交成功</p>   </div>
            <span slot="footer" class="dialog-footer"  close="colseTips">
                    <el-button type="primary" @click="confirm">确定</el-button>
                </span>
        </el-dialog>
    </div>
</body>
<script>
    // new Vue().$mount('#app')
    new Vue({
        el: "#app",
        data() {
            return {
                input: "",
                detail: "",
                classify: "",
                videoaddr: "",
                tips:false
            }
        },
        methods: {
            handleSuccessImg(index, value) {
                console.log(value)
                this.videoaddr = value;
                this.videoaddr = this.videoaddr.substring(this.videoaddr.indexOf("/") + 1, this.videoaddr
                    .length);
                console.log(this.videoaddr);
            },
            uploadOk(val) {
                console.log(val)
                var formData = new FormData();
                formData.append("file", val.file);
                console.log(formData);
                axios.post("http://192.168.0.107:8002/upload/videos",
                        // {
                        // data: {
                        formData
                        // }
                        // }

                    )
                    .then((result) => {
                        console.log(result);

                    }).catch((err) => {
                        console.log(err)
                    });
            },
            submit() {
                console.log(this.input);
                console.log(this.detail);
                console.log(this.classify);
                var that = this;
                var myDate = new Date;
                console.log(myDate)
                var year = myDate.getFullYear();
                var month = myDate.getMonth() + 1;
                //获取当前日
                var date = myDate.getDate();
                var h = myDate.getHours(); //获取当前小时数(0-23)
                var m = myDate.getMinutes(); //获取当前分钟数(0-59)
                var s = myDate.getSeconds();
                var creteTime = year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s + "";
                console.log(creteTime);
                // var time=creteTime.format("yyyy-MM-dd");
                // var data = new FormData();
                // data.append("videoaddr", 1);
                // data.append("videoname", 111);
                // data.append("videotype", 1);
                // data.append("videodate", 1);
                // console.log(data);
                var data = {};
                data.videoaddr = this.videoaddr;
                data.videoname = this.input,
                    data.videotype = this.classify,
                    data.videodate = creteTime,
                    console.log(data)

                // var a = JSON.stringify(data);
                var config = {
                    headers: {

                        // 'Content-Type': 'multipart/form-data'
                        'Content-Type': 'application/json'

                    }
                };

                // 

                axios.post(
                        "http://192.168.0.107:8002/videos/submit", data, config



                        // headers: {
                        //     'Content-Type': Access - Control - Allow - Origin
                        // } //设置header信息


                        //     "headers": {
                        //         ['Content-Type'] : 'application/json'

                        // }

                    )
                    .then((result) => {
                        console.log(result)
                        that.tips=true
                    }).catch((err) => {
                        console.log(err)
                    });
            },
            confirm(){
                window.history.go(-1);
            },
            colseTips(){
                window.history.go(-1);
            }
        },
    })
</script>

</html>